<template>
	<view class="container">
		<u-form :model="form" ref="uForm" class="form" label-width="200">
			<u-form-item label="原密码" prop="oldPassword">
				<u-input type="password" class="input" v-model="form.oldPassword" placeholder="请输入原密码" />
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword">
				<u-input type="password" class="input" v-model="form.newPassword" placeholder="请输入新密码" />
			</u-form-item>
			<u-form-item label="确认新密码" prop="confirmNewPassword">
				<u-input type="password" class="input" v-model="form.confirmNewPassword" placeholder="请输入新密码" />
			</u-form-item>
		</u-form>
		<!-- <view class="tip-label">
			友情提示
		</view>
		<view class="tip-desc">
			当您修改密码后，指纹登录功能会自动关闭，需要重新开启，请知晓
		</view> -->
		<view class="common-btn submit-btn" @tap="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					oldPassword:"",
					newPassword:"",
					confirmNewPassword:"",
				},
				rules:{
					oldPassword:{
						required: true,
						message: '请输入原密码',
						trigger: ['change','blur'],
					},
					newPassword:{
						required: true,
						message: '请输入新密码',
						trigger: ['change','blur'],
					},
					confirmNewPassword:[
						{
							required: true, 
							message: '请再次确认新密码',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return value===this.form.newPassword
							},
							message: '2次密码输入不一致',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
				}
			};
		},
		methods:{
			 submit(){
				 this.$refs.uForm.validate(valid => {
				 	if (valid) {
				 		this.$u.api.modifyPasswordApi({
							oldpassword:this.form.oldPassword,
							newpassword:this.form.newPassword,
							renewpassword:this.form.confirmNewPassword
						}).then(()=> {
				 			uni.showToast({
				 				icon:"success",
				 				title:"重置成功"
				 			})
				 			setTimeout(()=>{
				 				this.$Router.push("/pages/login/login")
				 			},1000)
				 		})
				 	} else {
				 		console.log('验证失败');
				 	}
				 });
			 },
			
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
	}
</script>

<style lang="scss">
.container{
	padding-top: 18rpx;
	.form{
		padding-left: 30rpx;
		background-color: #fff;
		.input{
			flex-basis: 450rpx;
			flex-grow: 0;
		}
	}
	.submit-btn{
		margin: 60rpx 30rpx;
	}
}
</style>
